<template>
  <div>
    <p class="title">充值列表</p>
    <div class="head">
      <div>
        <el-button-group>
          <el-button v-for="item in options" :key="item.id" @click="handleChange(item.id)"
            :type="query.days==item.id?'info':''" size="small">{{item.text}}
          </el-button>
        </el-button-group>
        <el-date-picker v-model="date" type="daterange" size="small" unlink-panels range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </div>
      <el-input v-model="query.content" @change="search" clearable class="input" size="small" prefix-icon="el-icon-search"
        placeholder="请输入用户账号">
      </el-input>
    </div>
    <div class="price-box">
      <h3> 充值金额总计：{{rechargeMoney}}元</h3>
    </div>
    <div>
      <el-table ref="singleTable" :data="tableData" highlight-current-row border style="width: 100%">
        <el-table-column type="index" label="序号" align="center" width="80">
        </el-table-column>
        <el-table-column prop="account" label="用户账号" align="center">
        </el-table-column>
        <el-table-column prop="nickname" label="用户昵称" align="center">
        </el-table-column>
        <el-table-column prop="roMoney" label="充值金额" align="center">
        </el-table-column>
        <el-table-column prop="diamonds" label="充值钻石" align="center">
        </el-table-column>
        <el-table-column prop="giveDiamonds" label="赠送钻石" align="center">
        </el-table-column>
        <el-table-column prop="roTime" label="日期" align="center">
        </el-table-column>
        <el-table-column label="支付方式" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.payMethod==1">支付宝</span>
            <span v-else-if="scope.row.payMethod==2">微信</span>
            <span v-else-if="scope.row.payMethod==3">苹果内购</span>
          </template>
        </el-table-column>
      </el-table>
      <Page :total="total" :PageNumber.sync="query.pageNumber" :PageSize.sync="query.pageSize" @current-change="changeCurrentPage"
      @size-change="handleSizeChange">
    </Page>
    </div>
  </div>
</template>

<script>
  import Page from "@/components/page.vue";
  import financial from "@/apis/modules/financial"
  export default {
    components: {
      Page,
    },
    data() {
      return {
        days: "",
        options: [
          { text: "今天", id: 1 },
          { text: "近7天", id: 7 },
          { text: "近30天", id: 30 },
        ],
        date: null,
      
      
       query:{
        days: "",//1 7 30
        starttime: "",//开始时间
        endtime: "",//结束时间
        content: "",//搜索内容
        pageNumber: 1,//当前页数
        pageSize: 10,//每页显示多少条
       },
        total: 0,
        tableData: [],
        rechargeMoney: 0,//充值总金额
      };
    },
    created() {
      this.getRechargeOrder()
    },
    methods: {
      // 条件搜索
      search(){
        this.query.pageNumber=1;
        this.getRechargeOrder()
      },
      // 获取充值列表
      async getRechargeOrder() {
        const { code, data, msg } = await financial.getRechargeOrder(this.query)
        if (code == 200) {
          this.total = data.count;
          this.tableData = data.list;
          this.rechargeMoney = data.rechargeMoney

        }
      },
      // 选择天数
      handleChange(id) {
        this.query.days = id;
     this.search()
      },
      // 改变日期
      dateChange(date) {
        if (date != null) {
          this.query.starttime = date[0];
          this.query.endtime = date[1];
        } else {
          this.query.starttime = "";
          this.query.endtime = "";
        }
        this.search()
      },
      //改变当前页数
      changeCurrentPage(val) {
        this.getRechargeOrder()
      },
      //改变每页显示条数
      handleSizeChange(val) {
        this.getRechargeOrder()
      },

    },
  };
</script>

<style lang="scss" scoped>
  .title {
    margin-bottom: 32px;
  }

  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .el-button-group {
    margin-right: 32px;
  }

  .price-box {
    margin: 16px 0;
    padding: 0 16px;
    display: flex;
    background-color: #f2f2f2;
    line-height: 50px;


  }

  h3:first-child {
    margin-right: 200px;
  }

  .el-input {
    width: 300px;
  }
</style>